<template>
	<view class="add-house">
		<view class="current-location">当前地点</view>
		<view class="content">
			<text>{{currentLocation}}</text>
			<view @click="chooseLocation">
				<image src="../../static/icon/locate.png"></image>
				<text>重新定位</text>
			</view>
		</view>

		<view class="community">
			<view class="title">
				附近社区
			</view>
			<u-cell-group>
				<u-cell v-for="item in communityList" :key="item.id" :title="item.title" isLink
					@click="selectCommunity(item.title)"></u-cell>
			</u-cell-group>
		</view>

		<!-- <map id="map" @markertap="onMarker" :markers="markers" :longitude="location.longitude"
			:latitude="location.latitude"></map> -->
	</view>
</template>

<script>
	import qqmapwx from '../../utils/initQqMapWx.js'
	export default {
		data() {
			return {
				location: {
					longitude: 0,
					latitude: 0
				},
				markers: [{
					id: 1,
					longitude: 0,
					latitude: 0,
					width: 30,
					height: 40
				}],
				currentLocation: '定位中...',
				communityList: []
			};
		},

		onLoad() {

			this.initLocation()
		},
		methods: {
			selectCommunity(title) {
				uni.navigateTo({
					url: '/pkg-house/house-number/house-number'
				})
				this.$store.commit('house/setHouseTitle', title)
			},
			initLocation() {
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: 'true',
					success: (res) => {
						// console.log(res)
						this.updateLocation(res)
						// 用于坐标解析
						this.initLocationText()
						this.searchCommunity()
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// 将坐标解析文本
			initLocationText() {
				qqmapwx.reverseGeocoder({
					location: this.location,
					success: (res, data) => {
						this.currentLocation = res.result.address
					}
				})
			},
			chooseLocation() {
				uni.chooseLocation({
					...this.location,
					success: (res) => {
						// console.log(res)
						if (!res.name) return
						this.currentLocation = res.name
						this.updateLocation(res)
						this.searchCommunity()
					}
				})

			},
			updateLocation(res) {
				this.location.longitude = res.longitude
				this.location.latitude = res.latitude
				this.markers[0].longitude = res.longitude
				this.markers[0].latitude = res.latitude
			},
			searchCommunity() {
				qqmapwx.search({
					location: this.location,
					keyword: '小区住宅',
					success: (res) => {
						// console.log(res)
						this.communityList = res.data
						res.data.forEach(item => {
							item.id = item.id - 0
							this.markers.push({
								id: item.id - 0,
								longitude: item.location.lng,
								latitude: item.location.lat,
								width: 30,
								height: 40,
								title: item.title,
								iconPath: '/static/icon/house.png'
							})
						})
					}
				})
			},
			onMarker(e) {
				const house = this.markers.find(item => {
					return item.id === e.markerId
				})
				console.log(house)
				uni.navigateTo({
					url: '/pkg-house/house-number/house-number'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#map {
		width: 750rpx;
		height: 750rpx;
	}

	.add-house {
		height: 100%;
		background-color: #fafafa;

		.current-location {
			padding: 0 30rpx;
			line-height: 86rpx;
			color: #979797;
			font-size: 24rpx;
		}

		.content {
			width: 750rpx;
			height: 102rpx;
			background-color: #fff;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 28rpx;
				color: #333;
			}

			view {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 6rpx;
				}

				text {
					color: #5591AF;
				}
			}
		}

		.community {
			.title {
				padding: 0 30rpx;
				line-height: 86rpx;
				color: #979797;
				font-size: 24rpx;
			}

			::v-deep .u-cell__body {
				background-color: #fff;
			}
		}
	}
</style>
